<script lang="ts" setup>
import { ElButton, ElTabs, ElTabPane, ElRow, ElCol } from 'element-plus';
import { reactive, ref, onMounted } from 'vue';
import { router } from '#/router';
import { getTaskDetail } from '#/api/sys/task';

const activeName = ref('first');
const record = reactive({
  taskName: '',
  taskType: '',
  airlineName: '',
  importantLevel: '',
  status: '',
  startTime: '',
  endTime: '',
  onSiteInspectionPeriod: '',
  onSiteInspectionTimes: 0,
  onSiteInspectionDistance: 0,
  errNums: 0,
  errType: '',
});

const handleBack = () => {
  router.go(-1);
};

const getDetail = async () => {
  const params = {
    id: router.currentRoute.value.query.id,
  };
  const { data } = await getTaskDetail(params);
  record.taskName = data.taskName;
  record.taskType = data.taskType;
  record.airlineName = data.airlineName;
  record.importantLevel = data.importantLevel;
  record.status = data.status;
  record.startTime = data.startTime;
  record.endTime = data.endTime;
  record.onSiteInspectionPeriod = data.onSiteInspectionPeriod;
  record.onSiteInspectionTimes = data.onSiteInspectionTimes;
  record.onSiteInspectionDistance = data.onSiteInspectionDistance;
  record.errNums = data.errNums;
  record.errType = data.errType;
};

onMounted(() => {
  getDetail();
});
</script>

<template>
  <div class="detailPage mg-10 pd-20">
    <div class="backBtn">
      <Back width="18px" hight="18px" />
      <ElButton class="btn" @click="handleBack()">返回</ElButton>
    </div>
    <ElTabs v-model="activeName" class="detail-form">
      <ElTabPane label="任务详情" name="first">
        <div class="page">
          <p class="title">任务信息</p>
          <ElRow>
            <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="searchCol">
              <div>
                <span class="labelText">任务名称：</span>
                <span class="bold">{{ record.taskName }}</span>
              </div>
            </ElCol>
            <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="searchCol">
              <div>
                <span class="labelText">任务类型：</span>
                <span class="bold">{{ record.taskType }}</span>
              </div>
            </ElCol>
            <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="searchCol">
              <div>
                <span class="labelText">任务周期：</span>
                <span class="bold">{{ record.onSiteInspectionPeriod }}</span>
              </div>
            </ElCol>
            <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="searchCol">
              <div>
                <span class="labelText">重要程度：</span>
                <span class="bold">{{ record.importantLevel }}</span>
              </div>
            </ElCol>
            <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="searchCol">
              <div>
                <span class="labelText">任务状态：</span>
                <span class="bold">{{ record.status }}</span>
              </div>
            </ElCol>
            <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="searchCol">
              <div>
                <span class="labelText">航线：</span>
                <span class="bold">{{ record.airlineName }}</span>
              </div>
            </ElCol>
            <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="searchCol">
              <div>
                <span class="labelText">开始时间：</span>
                <span class="bold">{{ record.startTime }}</span>
              </div>
            </ElCol>
            <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="searchCol">
              <div>
                <span class="labelText">结束时间：</span>
                <span class="bold">{{ record.endTime }}</span>
              </div>
            </ElCol>
          </ElRow>
          <p class="title">任务执行情况</p>
          <ElRow>
            <ElCol :xs="24" class="searchCol">
              <div
                style="
                  display: flex;
                  align-items: flex-start;
                  justify-content: flex-start;
                "
              >
                <span class="labelText">巡检报告：</span>
                <div
                  class="bold"
                  style="
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: flex-start;
                  "
                >
                  <p style="margin: 0">
                    巡检时长{{ record.onSiteInspectionTimes }}分钟，距离{{
                      record.onSiteInspectionDistance
                    }}公里，发现异常情况
                    <span style="color: red">{{ record.errNums }} </span>
                    处，异常种类为“
                    <span style="color: red">{{ record.errType }} </span>
                    ”
                  </p>
                  <div
                    style="
                      display: flex;
                      align-items: flex-start;
                      justify-content: flex-start;
                    "
                  >
                    <img src="https://picsum.photos/200/300" alt="" />
                    <img src="https://picsum.photos/200/300" alt="" />
                  </div>
                </div>
              </div>
            </ElCol>
          </ElRow>
          <ElRow>
            <ElCol :xs="24" class="searchCol">
              <div>
                <span class="labelText">巡检数据：</span>
                <ElButton class="bluebtn" link size="small">在线查看</ElButton>
                <ElButton class="bluebtn" link size="small">打包下载</ElButton>
              </div>
            </ElCol>
          </ElRow>
        </div>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
<style scoped>
p {
  margin: 20px 0;
  font-weight: 900;
}

.title {
  padding: 4px;
  margin-bottom: 30px;
  background: rgb(243.9 244.2 244.8);
}

.labelText {
  color: #ccc;
}

img {
  height: 100px;
  margin-top: 10px;
  margin-right: 20px;
}

.el-col{
margin-bottom: 20px;
}

.bluebtn {
  color: var(--el-color-primary) !important;
}
</style>
